<template>
	<u-popup v-model="manager" mode="bottom" @close='close'>
		<view class="manager u-skeleton">
			<view class="title u-skeleton-rect">
				联系附近店长购买
				<u-icon name='close' @click='close'></u-icon>
			</view>
			<view class="tips u-skeleton-rect" @click="$util.redirectTo('/pages/tidalcard/allManagers')">
				查看所有店长
			</view>
			<div class="box-scroll u-skeleton-rect" >
				<diy-scorll :Empty='managerList.length ? false : true' :status = 'status' @scrolltolower='getmanager' @refresherrefresh='refresherrefresh'>
					<view class="item" v-for="(item,index) in managerList" :key="index">
						<view class="i-title">{{item.address}}</view>
						<view class="i-info">
							<view class="i-tips">店长:</view>
							<view class="nameImage">
								<u-avatar :src="$util.img(item.avatar)" size='40'></u-avatar>
								<view class="name">{{item.nickname}}</view>
							</view>
						</view>
						<view class="i-info">
							<view class="i-tips">联系他</view>
							<view class="nameImage">
								<view class="n-item">
									<u-icon name='weixin-circle-fill' size='28' color='#42b983'></u-icon>
									<view class="context">{{item.wechat_no}}</view>
									<image :src="$util.img('/static/img/my/复制.png')" mode="widthFix" @click="copy(item.wechat_no)"></image>
								</view>
								<view class="n-item">
									<u-icon name='qq-circle-fill' size='28'  color='#2d8cf0'></u-icon>
									<view class="context">{{item.qq_no}}</view>
									<image :src="$util.img('/static/img/my/复制.png')" mode="widthFix" @click="copy(item.qq_no)"></image>
								</view>
							</view>
						</view>
					</view>
				</diy-scorll>
			</div>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			managerShow: {
				type: [String, Boolean],
				default: false
			},
			managerList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data(){
			return {
				//控制弹窗
				manager:true,
				// 列表下面文字状态
				status:'loadmore',
				//请求的参数
				page:{
					page:1,
					page_size:8,
				}
			}
		},
		mounted() {
		},
		watch: {
			managerShow: {
				handler(newval, oldVal) {
					this.manager = this.managerShow;
				},
				immediate: true
			}
		},
		methods:{
			//弹窗关闭
			close(){
				this.$emit('close')
			},
			// 下拉双薪
			refresherrefresh(callback){
				this.page = {
					page:1,
					page_size:8,
				},
				this.getmanager(callback);
			},
			// 或许商品列表
			getmanager(callback){
				this.$http.asyncSendrequest({
					url:'/order/buyHandle',
					data:{},
					success:res=>{
						if(res.code == '0') {
							if(res.data.length > 10){
								this.goodsList = res.data.splice(0,10)
							} else {
								this.goodsList = res.data
							}
								
							// if(this.page.page == 1) this.goodsList = [];
							// if(res.data.length){
							// 	this.goodsList = this.goodsList.concat(res.data);
							// 	this.page.page += 1;
							// } else {
							// 	//下面加载的文字
							// 	this.status = 'nomore';
							// }
							// if(typeof callback == 'function') callback();
							// this.loding = false;
						}
					}
				})
			},
			// 复制数据
			copy(value){
				this.$util.copy(value,(res)=>{
					// console.log("zhegn1")
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.manager{
		width: 100%;
		height: 90vh;
		background: var(--bg-project);
		border-radius: 10rpx 10rpx 0 0;
		padding: 30rpx;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.tips{
			width: 200rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			border: 1rpx solid #232323;
			border-radius: 6rpx;
			margin-top: 30rpx;
		}
		.box-scroll{
			height: calc(100% - 200rpx);
			margin-top: 24rpx;
			.item{
				min-height: 150rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				.i-title{
					font-size: 26rpx;
					margin-bottom: 20rpx;
				}
				.i-info{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.i-tips{
						font-size: 26rpx;
						width: 90rpx;
						text-align: right;
						margin-right: 20rpx;
					}
					.nameImage{
						display: flex;
						align-items: center;
						.name{
							margin-left: 20rpx;
						}
						.n-item{
							width: 200rpx;
							display: flex;
							height: 40rpx;
							align-items: center;
							justify-content: space-between;
							padding: 4rpx 10rpx;
							border: 1rpx solid rgba(0,0,0,.4);
							border-radius:4rpx;
							margin-right: 20rpx;
							background: rgba(0,0,0,.1);
							.context{
								width: 100rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								font-size: 24rpx;
							}
							image{
								width: 30rpx;
							}
						}
					}
				}
				.i-info:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
</style>